<template>
  <div class="yun-page">
    <div class="yun-card" style='overflow: hidden;'>
      <img class='yun-img1' src="@/assets/img/token/bg1.png" alt="" v-if="creenWidth > 480">
      <img class='yun-img1' src="@/assets/img/app/token/bg1.png" alt="" v-if="creenWidth < 480">
      <div class="yun-card1">
        <h3 class="yun-title">
          <span v-if="creenWidth > 480">—</span> {{pageData.card1.title}} 
          <span v-if="creenWidth > 480">—</span></h3>
        <p class="yun-sbtitle">
          {{pageData.card1.sbtitle}}
        </p>
      </div>
    </div>
    <div class="yun-card">
      <img src="@/assets/img/token/bg2.png" alt="" v-if="creenWidth > 480">
      <img src="@/assets/img/app/token/bg2.png" alt="" v-if="creenWidth < 480">
      <div class="yun-card2">
        <div class="yun-item" v-for="(item, index) in pageData.card2" :key="index">
          <div class="yun-num">{{ item.value }}</div>
          <div class="yun-title">{{ item.label }}</div>
        </div>
      </div>
    </div>
    <div class="yun-card" style="overflow: hidden">
      <img src="@/assets/img/token/bg3.png" alt="" v-if="creenWidth > 480">
      <img src="@/assets/img/app/token/bg3.png" alt="" v-if="creenWidth < 480">
      <div class="yun-point3">
          <img src="@/assets/img/points.png" alt="" />
        </div>
        <div class="yun-point4">
          <img src="@/assets/img/points.png" alt="" />
        </div>
      <div class="yun-card3" >
        <div class='yun-title'> {{pageData.card3.title}}</div>
        <div class='yun-content'>
          <div class='yun-chart'>
             <img :src="pageData.cardimg1" alt="" />
          </div>
          <div class='yun-word'>
            <p v-for="(item,index) in pageData.card3.list" :key='index'>{{item.p}}</p>
          </div>
        </div>
      </div>
      <div class="yun-card4" >
        <div class='yun-title'> {{pageData.card4.title}}</div>
        <div class='yun-content'>
          
          <div class='yun-word'>
            <p v-for="(item,index) in pageData.card4.list" :key='index'>{{item.p}}</p>
          </div>
          <div class='yun-chart'>
             <img :src="pageData.cardimg2" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Token",
  components: {},
 data() {
    return {
      pageData:this.$lang[this.$store.state.lang].token,
      creenWidth: document.body.clientWidth,
      scrollTop:null
    };
  },
   created(){
     window.addEventListener('scroll',this.handleScroll,true)
  },
  methods:{
    handleScroll(){
      this.scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    },
  },
  watch:{
    '$store.state.lang'(val){
        this.pageData=this.$lang[this.$store.state.lang].token
    },
  }
};
</script>
<style lang='scss' scoped>
.yun-page {
  width: 100%;
  margin: 0 auto;
  .yun-card{
    width:100%;
    position: relative;
    &>img{
      width:100%;
    }
    .yun-card1 {
      width:1000px;
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      .yun-title {
        font-size: 32px;
        font-weight: bold;
        color: #31313b;
        text-align: center;
        animation:runkey2 1s;
      }
      .yun-sbtitle {
        margin-top: 20px;
        font-size: 18px;
        color: #828282;
        line-height: 28px;
        text-align: center;
        animation:runkey2 2s;
      }
    }
    .yun-card2{
      position: absolute;
      top:-12%;
      left:50%;
      transform: translate(-50%,0);
      width: 800px;
      height: auto;
      background: #FFFFFF;
      box-shadow: 0px 10px 68px 0px rgba(15, 23, 115, 0.33);
      border-radius: 10px;
      padding: 6px 40px 0px;
      animation:runkey5 2s;
      .yun-item{
        width:100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
         line-height: 80px;
        .yun-num{
          font-size: 30px;
          color: #F0980E;
          font-weight: bold;
        }
        .yun-title{
          font-size: 18px;
          color: #31313B;
          font-weight: bold;
        }
      }
    }
    .yun-card3{
      position: absolute;
      top:3%;
      left:50%;
      transform: translate(-50%,0);
      width:1100px;
      .yun-title{
        font-size: 32px;
        font-weight: bold;
        color: #31313B;
        text-align: center;
      }
      .yun-content{
        display: flex;
        justify-content: space-between;
        margin-top:40px;
        align-items: center;
        .yun-chart{
          width:45%;
          img{
            width:100%;
          }
        }
        .yun-word{
          width:45%;
          p{
            font-size: 18px;
            color: #828282;
            line-height: 24px;
            margin-bottom:20px;
          }
        }
      }
      
    }
    .yun-card4{
      position: absolute;
      top:58%;
      left:50%;
      transform: translate(-50%,0);
      width:1100px;
      .yun-title{
        font-size: 32px;
        font-weight: bold;
        color: #31313B;
        text-align: center;
      }
      .yun-content{
        display: flex;
        justify-content: space-between;
        margin-top:40px;
        align-items: center;
        .yun-chart{
          width:45%;
          img{
            width:100%;
          }
        }
        .yun-word{
          width:45%;
          p{
            font-size: 18px;
            color: #828282;
            line-height: 24px;
            margin-bottom:20px;
          }
        }
      }
    }
  }
  .yun-point3{
    position: absolute;
    top:8%;
    right:2%;
    width:160px;
    img{
      width:100%;
    }
  }
  .yun-point4{
    position: absolute;
    bottom:0%;
    right:8%;
    width:160px;
    img{
      width:100%;
    }
  }
}
.yun-img1{
  animation: runkey1 2s linear 2s infinite alternate;
}
@media screen and (max-width: 480px) {
  .yun-page {
  width: 100%;
  margin: 0 auto;
  .yun-card{
    width:100%;
    position: relative;
    &>img{
      width:100%;
    }
    .yun-card1 {
      width:90%;
      position: absolute;
      top:40px;
      left:50%;
      transform: translate(-50%,0);
      .yun-title {
        font-size: 22px;
        font-weight: bold;
        color: #31313b;
        text-align: center;
      }
      .yun-sbtitle {
        margin-top: 8px;
        font-size: 16px;
        color: #828282;
        line-height: 20px;
        text-align: center;
      }
    }
    .yun-card2{
      position: absolute;
      top:-40px;
      left:50%;
      transform: translate(-50%,0);
      width: 90%;
      height: auto;
      background: #FFFFFF;
      box-shadow: 0px 10px 68px 0px rgba(15, 23, 115, 0.33);
      border-radius: 10px;
      padding: 10px 20px;
      .yun-item{
        width:100%;
        display: block;
        justify-content: space-between;
        align-items: center;
         line-height: 54px;
        .yun-num{
          font-size: 24px;
          color: #F0980E;
          font-weight: bold;
          text-align: center;
        }
        .yun-title{
          font-size: 18px;
          color: #31313B;
          font-weight: bold;
          text-align: center;
        }
      }
    }
    .yun-card3{
      position: absolute;
      top:40px;
      left:50%;
      transform: translate(-50%,0);
      width:100%;
      .yun-title{
        font-size: 24px;
        font-weight: bold;
        color: #31313B;
        text-align: center;
      }
      .yun-content{
        display: block;
        justify-content: space-between;
        margin-top:20px;
        align-items: center;
        .yun-chart{
          margin:0 auto;
          width:90%;
          img{
            width:100%;
          }
        }
        .yun-word{
          width:90%;
          margin:0 auto;
          p{
            font-size: 16px;
            color: #828282;
            line-height: 24px;
            margin-bottom:12px;
          }
        }
      }
    }
    .yun-card4{
      position: absolute;
      top:59%;
      left:50%;
      transform: translate(-50%,0);
      width:100%;
      .yun-title{
        font-size: 24px;
        font-weight: bold;
        color: #31313B;
        text-align: center;
      }
      .yun-content{
        display: block;
        justify-content: space-between;
        margin-top:20px;
        align-items: center;
        position: relative;
        .yun-chart{
           position: absolute;
          top:0;
          left:50%;
          transform: translate(-50%,0);
          width:90%;
          img{
            width:100%;
          }
        }
        .yun-word{
          width:90%;
           position: absolute;
          top:16rem;
          left:50%;
          transform: translate(-50%,0);
          p{
            font-size: 16px;
            color: #828282;
            line-height: 24px;
            margin-bottom:18px;
          }
        }
      }
    }
  }
  .yun-point3{
    position: absolute;
    top:1%;
    right:-9%;
    width:110px;
    img{
      width:100%;
    }
  }
  .yun-point4{
    position: absolute;
    bottom:1%;
    right:6%;
    width:110px;
    img{
      width:100%;
    }
  }
}
}
@keyframes runkey1{
   0%{
      opacity: 1;
      transform: scale(1);
   }
   50%{
      opacity: 0.8;
      transform: scale(1.1);
   }
   100%{
       opacity: 1;
       transform: scale(1);
   }
}
@keyframes runkey2{
   0%{
      transform: scale(0);
   }
   100%{
       transform: scale(1);
   }
}

@keyframes runkey3{
   0%{
       transform: translateY(0px);
   }
   50%{
     transform: translateY(-20px);
   }
   100%{
        transform: translateY(0px);
   }
}
@keyframes runkey4{
   0%{
       transform: scale(1);
   }
   50%{
     transform: scale(1.05);
   }
   100%{
        transform: scale(1);
   }
}
@keyframes runkey5{
   0%{
      top:40px;
   }
   100%{
      top:-150;
   }
}
</style>
